<template>
    <div>
        <div style="position: fixed;
                            top:0;
                            left:0;
                            width: 100%;
                            height: 100%;
                            background: #f6f6f6;
                            z-index: -1;
                            "></div>

        <!-- 浏览器宽度不足 -->
        <div v-if="clientWidth < 600" style="position: fixed;
                            top:0;
                            left:0;
                            width: 100%;
                            height: 100%;
                            background: rgba(0,0,0,.7);
                            z-index: 9999;
                            ">
            <div style="position: absolute;
                                top: 50%;
                                left: 50%;
                                color: #f6f6f6;
                                text-align: center;
                                padding: 30px;
                                box-sizing: border-box;
                                width: 100%;
                                transform: translate(-50%,-50%);
                                ">
                请保留一定的浏览器宽度，以便正常使用
            </div>
        </div>

        <div class="head"></div>
        <div class="head" style="position: fixed;top:0;width: 100%;">

            <Head />
        </div>
        <div class="menu-box">
            <ManageMenu />
        </div>

        <div class="body-box">
            <div class="body-box-header">
                <el-breadcrumb class="body-box-headerb-readcrumb">

                    <template v-for="(item, index) in store.breadcrumb" :key="index">
                        <el-popover
                        v-if="index != store.breadcrumb.length - 1"
                        placement="top-start"
                            :width="200" trigger="hover">
                            <el-button type="text" style="color: rgba(255,0,0,.6);" @click="store.removeBreadcrumb(item)">
                                <el-icon size="16">
                                    <Delete></Delete>
                                </el-icon>
                                <span style="margin-left: 2px;">{{ store.appFront.delete }}</span>
                            </el-button>
                            <template #reference>
                                <el-breadcrumb-item @click="store.selectBreadcrumb(item)" :to="{ path: item.path }">{{
                                    menuMap.get(item.code) }}</el-breadcrumb-item>
                            </template>
                        </el-popover>
                        <el-breadcrumb-item v-else @click="store.selectBreadcrumb(item)" :to="{ path: item.path }">{{
                            menuMap.get(item.code) }}</el-breadcrumb-item>

                    </template>

                </el-breadcrumb>
            </div>
            <div class="body-box-router-view">
                <RouterView />
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import ManageMenu from './components/ManageMenu.vue';
import Head from './components/Head.vue';

import { useStore } from '@/stores/counter';
import { ref } from 'vue';

import $kt from '@/vueKantboot';

let store = useStore();
let clientWidth = ref(document.documentElement.clientWidth);

let onresize = () => {
    clientWidth.value = document.documentElement.clientWidth;
    if (clientWidth.value < 600) {
        document.documentElement.style.overflow = 'hidden';
    } else {
        document.documentElement.style.overflow = 'auto';
    }
}

onresize();
// 监听浏览器窗口大小变化
window.onresize = function () {
    onresize();
}


let menus = ref([]);
let menuMap = ref(new Map());

let breadcrumbStrorage = localStorage.getItem('breadcrumb');
if (breadcrumbStrorage) {
    store.breadcrumb = JSON.parse(breadcrumbStrorage);
}

let getMenus = async () => {
    $kt.request.request({
        url: '/admin/menu/getNoDirectoryMenus',
        method: 'post',
    }).then((res) => {
        menus.value = res.data.data;
        menus.value.forEach((item: any) => {
            menuMap.value.set(item.code, item.name);
        });
    });
}

getMenus();



store.$onAction((json) => {
    if (json.name == "setLanguageCode") {
        getMenus();
    }
});


</script>

<style lang="scss" scoped>
.info-popover {
    width: 200px;
    height: 400px;
}


.head {
    background-color: #ffffff;
    box-sizing: border-box;
    border: 2px solid #ebeef5;
    height: 55px;
    position: relative;
    width: 100%;
    z-index: 999;
    min-width: 600px;

}

.menu-box {
    position: relative;
    float: left;
    width: 240px;
    height: calc(100vh - 55px);
}

.body-box {

    width: calc(100% - 240px);
    height: calc(100vh - 70px);
    float: left;
    position: absolute;
    min-width: 500px;
    left: 240px;

    .body-box-header {
        position: relative;
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        border-bottom: none;
        box-sizing: border-box;
        padding: 0 20px 0 20px;
        margin-top: 10px;

        .body-box-headerb-readcrumb {
            font-size: 16px;
            padding: 16px 0 16px 16px;
            border-radius: 10px;
            border: 2px solid #ebeef5;
            box-sizing: border-box;
            color: #999999;
            background-color: #ffffff;
        }
    }

    .body-box-router-view {
        position: relative;
        width: 100%;
        height: calc(100% - 40px);
        padding: 20px;
        box-sizing: border-box;
    }

}
</style>